<template>
  <div class="block">
    <div style="margin-top: 10px; margin-left: 10px;">

      <label class="label-text">站场名称</label>
      <el-select v-model="alarmInfo.station" placeholder="请选择" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in stationNameOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <label class="label-text">机车号</label>
      <el-input v-model.trim="alarmInfo.trainNo" placeholder="请输入" style="width: 200px;" class="filter-item" />

      <label class="label-text">开始时间</label>
      <el-date-picker
       v-model="alarmInfo.startTime"
       type="datetime"
       placeholder="选择日期时间">
      </el-date-picker>

      <label class="label-text">结束时间</label>
      <el-date-picker
       v-model="alarmInfo.endTime"
       type="datetime"
       placeholder="选择日期时间">
      </el-date-picker>

      <el-button  @click="reset">
        重置
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
        查询
      </el-button>
    </div>

    <div>
      <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="rcvTableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      ref='refsTable'
      >
      <el-table-column label="站场名称" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.stationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="机车号" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.trainNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="动车时间" align="center" width="100">
          <template slot-scope="{row}">
          <span>{{ row.happenTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="停车时间" align="center" width="100">
          <template slot-scope="{row}">
          <span>{{ row.happenTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="空线走行时间" width="200" align="center">
          <template slot-scope="{row}">
            <span>{{ row.fixTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业计划开始时间" width="300" align="center">
          <template slot-scope="{row}">
            <span>{{ row.alarmContent }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业计划结束时间" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.alarmLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业实际开始时间" width="300" align="center">
          <template slot-scope="{row}">
            <span>{{ row.alarmContent }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业实际结束时间" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.alarmLevel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="预计结束时间" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.alarmLevel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="推算上线及发车时间" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.alarmLevel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="钩数" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.alarmLevel }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="记事栏" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.alarmLevel }}</span>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div>
      <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]"
        :total="totalDataLength" :current-page="currentPage" align="center">
      </el-pagination>
    </div>
  </div>
</template>


<script>
import script from './script'
export default script
</script>


<style lang="scss" scoped>
@import './style.scss'
</style>
